<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>装饰</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_9pecp3wxz7z7u8fr.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxMall.css"/>
		<link rel="stylesheet" type="text/css" href="../css/members.css"/>
		<link rel="stylesheet" type="text/css" href="../css/decorate.css"/>
	</head>
	<body>
		<footer class="footerBox">
			<a href="#" class="active">
				<i class="iconfont icon-index"></i>
				<span>首页</span>
			</a>
			<a href="#">
				<i class="iconfont icon-cubes"></i>
				<span>线下服务</span>
			</a>
			<a href="#">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="#">
				<i class="iconfont icon-cart"></i>
				<span>购物车</span>
			</a>
			<a href="#">
				<i class="iconfont icon-juxing-"></i>
				<span>装饰</span>
			</a>
			<a href="#">
				<i class="iconfont icon-user"></i>
				<span>我的</span>
			</a>
		</footer>
		
		<ul class="orderMsg decorateHd">
			<li class="active"><span>设计师展示</span></li>
			<em style="border-left: 1px solid #dfdfdf; height: 2rem; margin-top: 1rem;"></em>
			<li><span>工长展示</span></li>
			<em style="border-left: 1px solid #dfdfdf; height: 2rem; margin-top: 1rem;"></em>
			<li><span>材料展示</span></li>
		</ul>
		
		<div class="decorateMain">
			<div class="decorateCon">
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt>室内设计师：流星</p>
							<dd>擅长室内设计的忧郁男神</span>
						</dl>
						<dl class="">
							<dt><img src="../images/star5.png" width="100"/></dt>
							<dd>(已被预约13次)</dd>
						</dl>
					</div>
				</a>
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt>木地板</p>
							<dd>好品质，用事实说话</span>
						</dl>
						<dl class="">
							<dt><img src="../images/star5.png" width="100"/></dt>
							<dd>(已被预约13次)</dd>
						</dl>
					</div>
				</a>
			</div>
			<div class="decorateCon dn">
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt>五星工长：流星</p>
							<dd>高效高效高效高效高效高效高效高效高效高效</span>
						</dl>
						<dl class="">
							<dt><img src="../images/star5.png" width="100"/></dt>
							<dd>(已被预约13次)</dd>
						</dl>
					</div>
				</a>
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt class="plr10">木地板</p>
							<dd class="plr10">好品质，用事实说话</span>
						</dl>
						<dl class="">
							<dt><img src="../images/star5.png" width="100"/></dt>
							<dd>(已被预约13次)</dd>
						</dl>
					</div>
				</a>
			</div>
			<div class="decorateCon dn">
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt>木地板</p>
							<dd>好品质，用事实说话</span>
						</dl>
						
					</div>
				</a>
				<a href="#">
					<img src="../images/aboutUs.png" class="decorateImg"/>
					<div class="goodFlex decorateTit">
						<dl class="goodCell">
							<dt>木地板</p>
							<dd>好品质，用事实说话</span>
						</dl>
						
					</div>
				</a>
			</div>
		</div>
		
		<a href="#" class="decorateIcon"></a>
		
		<div class="" id="footerHeight"></div>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/network.js"></script>
		<script>
			$(function(){
				var page = 1;
				var _url ='decorate/decorateDesigner/page/'+page+'/pageSize/20';
				getDecorate(_url);
				$('.orderMsg').on('click','li',function(){
					console.log($(this).index());	//因为中间有个em分割线，所有index为0和2
					var idx = $(this).index();
					$(this).addClass('active').siblings('li').removeClass('active');
					page = 1;
					switch(idx){
						case 0:		//设计师展示
						$('.decorateCon').eq(idx).removeClass('dn').siblings().addClass('dn');
						_url = 'decorate/decorateDesigner/page/'+page+'/pageSize/20';
						break;
						case 2:		//工长展示
						$('.decorateCon').eq(idx-1).removeClass('dn').siblings().addClass('dn');
						_url = 'decorate/decorateSupervisor/page/'+page+'/pageSize/20';
						break;
						case 4:		//材料展示
						$('.decorateCon').eq(idx-2).removeClass('dn').siblings().addClass('dn');
						_url = 'decorate/decorateMaterial/page/'+page+'/pageSize/20';
						break;
						default:
						return 0;
					}
					getDecorate(_url);
					
				});
				
				function getDecorate(url){
					ltNetwork.get(url,'',function(res){
						console.log(res);
					},function(msg){
						console.log(msg);
					});
				}
				
				//获取底部导航条的高度，赋值给div作为占位
				var footHeight = $('.footerBox').height();
				$('#footerHeight').height(footHeight);
			})
		</script>
	</body>
</html>
